<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else>
		<view>
			<view
				class="page_top2"
				:style="{
					'background': topNav ? 'white' : 'transparent',
					'z-index': 199,
				}"
			>
				<top-status></top-status>
				<view class="tabsBack">
					<view @click="goBack()" class="blackbox">
						<!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152491719361330.png"
									mode="widthFix"></image> -->
						<uni-icons :color="topNav ? 'black' : '#495052'" type="left" size="30"></uni-icons>
					</view>
					<view class="topTitle hiddenText" v-show="topNav"></view>
				</view>
			</view>
		</view>
		<image class="bgimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1723515039342174.png"></image>
		<view class="user_edit wap">
			<view class="group group_hd">
				<view class="lab">
					<!-- <view class="must">*</view> -->
					圈子头像
				</view>
				<view class="inp_box">
					<button class="user_header_btn" hover-class="none" @click="chooseavatar">
						<view class="user_headerimg">
							<view class="cover_btn">
								<image class="image_user" v-if="isHeader" @error="isHeader = false" :src="reqData.Logo" mode="aspectFill" />
								<image class="iamge_icon" v-else src="@/static/img/hd.png" mode="" />
							</view>
							<uni-icons type="right" size="18" color="#c6c6c6"></uni-icons>
						</view>
					</button>
				</view>
			</view>
			<view class="group">
				<view class="lab">
					<!-- <text class="must">*</text> -->
					圈子名
				</view>
				<view class="inp_box">
					<input
						v-if="reqData.Status == 1 || reqData.Status == 0"
						type="text"
						maxlength="10"
						v-model="reqData.TeamName"
						disabled
						@click="tisppag"
					/>
					<input v-else type="text" maxlength="10" v-model="reqData.TeamName" />
				</view>
			</view>
			<view class="group">
				<view class="lab">
					<!-- <text class="must">*</text> -->
					圈子口号
				</view>
				<view class="inp_box">
					<input type="text" maxlength="50" v-model="reqData.Tips" placeholder="请用一句话来描述圈子" />
				</view>
			</view>
			<view class="group">
				<view class="lab">
					<!-- <text class="must">*</text> -->
					成员加入是否需要审核
				</view>
				<view class="inp_box" style="padding: 24rpx 0">
					<switch
						:checked="reqData.IsAuditMember == 0 ? false : true"
						color="#111"
						style="transform: scale(0.85)"
						@change="AuditSwitch()"
					/>
				</view>
			</view>
			<view class="group">
				<view class="lab">
					<!-- <text class="must">*</text> -->
					成员加入是否需要收费
				</view>
				<view class="inp_box" style="padding: 24rpx 0">
					<switch
						:checked="reqData.IsJoinFee == 0 ? false : true"
						color="#111"
						style="transform: scale(0.85)"
						@change="FeeSwitch()"
					/>
				</view>
			</view>
			<block v-if="reqData.IsJoinFee == 1">
				<view class="group">
					<view class="lab">
						<!-- <text class="must">*</text> -->
						男士费用
					</view>
					<view class="inp_box">
						<input type="digit" maxlength="10" v-model="reqData.Men_Fee" placeholder="请输入男士费用/元" />
					</view>
				</view>
				<view class="group">
					<view class="lab">
						<!-- <text class="must">*</text> -->
						女士费用
					</view>
					<view class="inp_box">
						<input type="digit" maxlength="10" v-model="reqData.Women_Fee" placeholder="请输入女士费用/元" />
					</view>
				</view>
			</block>

			<view class="group" @click="showCity = true">
				<view class="lab">所在城市</view>
				<view class="inp_box">
					<input type="text" v-model="cityStr" disabled placeholder="请选择" />
				</view>
				<view class="icon_box"><uni-icons type="right" size="18" color="#c6c6c6"></uni-icons></view>
			</view>
			<view class="tagbox">
				<view class="tagtitle">运动类别</view>
				<view class="tagtextbox">
					<view
						class="tagtext"
						:class="item.checked ? 'text4' : ''"
						v-for="(item, index) in taglist"
						:key="index"
						@click="skitype(item.Code, item.checked)"
					>
						{{ item.Code }}
					</view>
				</view>
			</view>
			<view class="group_textarea">
				<view class="dectitle">圈子介绍</view>
				<textarea
					style="width: 100%; height: 54%; font-weight: 400"
					:value="reqData.Descript"
					placeholder="请填写介绍"
					placeholder-class="remtext"
					maxlength="200"
					@input="inputrem"
				/>
				<view class="count">{{ reqData.Descript.length }} / {{ maxCount }}</view>
			</view>
			
			<view style="height:255rpx;"></view>
		</view>
		<view class="bottombtn">
			<view class="paybtn" @click="CreateTeam()">{{ '保存' }}</view>
		</view>

		<u-picker
			:show="showCity"
			@cancel="showCity = false"
			immediateChange
			ref="uPicker"
			:columns="cityList"
			@change="changeHandler"
			@confirm="setCity"
		></u-picker>
	</view>
</template>

<script>
import { ieChooseImage, isCheckImage } from '../../common/imgExamine';
import topStatus from '@/components/topStatus/topStatus.vue';
import address from './address.js';
export default {
	components: {
		topStatus,
	},
	data() {
		return {
			load: false,
			Skillslist: [],
			cirID: '',
			resData: {},
			maxCount: 200,
			newlist: [],
			cityList: [],
			cityStr: '',
			showCity: false,
			isHeader: true,
			reqData: {
				TeamName: '', //圈子名称
				Descript: '', //圈子介绍
				Logo: '', // 圈子logo
				Province: '', //所在省份
				City: '', //所在城市
				Tag: '', // 标签
				Tips: '', //口号
			},
			taglist: [],
		};
	},
	computed: {
		numChoose() {
			const list = this.taglist;
			let num = 0;
			for (let i = 0; i < list.length; i++) {
				if (list[i].checked) {
					num++;
				}
			}
			return num;
		},
	},
	watch:{
		'reqData.IsAuditMember':{ 
			handler(val){
				console.log('=》》》》',val);
				if(val==1){
					this.reqData.IsJoinFee = 0
					this.reqData.Women_Fee = ''
					this.reqData.Men_Fee = ''
				}
			},
			immediate:true,
			deep:true
		},
		'reqData.IsJoinFee':{
			handler(val){
				console.log('=》》》》',val);
				if(val==1){
					this.reqData.IsAuditMember = 0
				}
			},
			immediate:true,
			deep:true
		}
	},
	async onLoad(e) {
		this.cirID = e.id;
		this.cirDetail();
		let add = address;
		let arr1 = add.map((item) => item.name);
		let arr2 = add[0].children.map((item) => {
			if (item.name == '市辖区' || item.name == '县') {
				return '--';
			} else {
				return item.name;
			}
		});
		this.cityList = [arr1, arr2];
	},
	methods: {
		FeeSwitch() {
			this.reqData.IsJoinFee = this.reqData.IsJoinFee == 1 ? 0 : 1;
			this.reqData.Men_Fee = '';
			this.reqData.Women_Fee = '';
		},
		AuditSwitch() {
			this.reqData.IsAuditMember = this.reqData.IsAuditMember == 1 ? 0 : 1;
		},
		tisppag() {
			this.$pv.msg('不可修改圈子名称');
		},
		//圈子详情
		async cirDetail() {
			let res = await this.$api.post('Team/Detail', {
				ID: this.cirID,
			});
			if (res.code == 0) {
				this.reqData = res.data;
				this.reqData.TeamName = this.$util.entitiesToUtf16(res.data.TeamName);
				this.reqData.Descript = this.$util.entitiesToUtf16(res.data.Descript);
				this.reqData.Logo = res.data.Logo;
				this.reqData.Tips = this.$util.entitiesToUtf16(res.data.Tips);
				this.Skillslist = res.data.Tag.split(',');
				if (res.data.Province == res.data.City) {
					this.cityStr = res.data.City;
				} else {
					this.cityStr = res.data.Province + ' ' + res.data.City;
				}
				await this.getSportType();
				this.load = true;
			}
		},
		//返回上一页
		goBack() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				// 如果页面栈长度大于1，则说明有上一页，可以返回
				uni.navigateBack();
			} else {
				// 如果没有上一页，则导航到首页
				uni.reLaunch({
					url: '/pages/tab/home',
				});
			}
		},
		// 获取运动标签
		async getSportType() {
			let res = await this.$api.post('Catalog/GetDictionary', {
				Type: 'SportType',
			});
			if (res.data.length > 0) {
				let list = [];
				for (let i = 0; i < res.data.length; i++) {
					const { ID, Code } = res.data[i];
					let data = {
						Code: Code,
						checked: this.Skillslist.includes(res.data[i].Code),
						id: ID,
					};
					list.push(data);
				}
				this.taglist = list;
			}
		},
		inputrem(e) {
			const { value, cursor } = e.detail;
			let str = this.$util.entitiesToUtf16(value);
			if (str.length > 200) {
				this.reqData.Descript = str.slice(0, 200);
			} else {
				this.reqData.Descript = str;
			}
		},
		async CreateTeam() {
			if (!this.reqData.Logo) {
				this.$pv.msg('请选择头像');
				return;
			}
			// if(!this.reqData.TeamName){
			// 	this.$pv.msg('请填写名称');
			// 	return
			// }
			if (!this.reqData.Tips) {
				this.$pv.msg('请填写口号');
				return;
			}
			if(this.reqData.IsJoinFee==1){
				if(!this.reqData.Men_Fee || this.reqData.Men_Fee<=0){
					this.$pv.msg('请填写男士费用');
					return 
				}
				if(!this.reqData.Women_Fee || this.reqData.Women_Fee<=0){
					this.$pv.msg('请填写女士费用');
					return 
				}
			}
			if (!this.reqData.City) {
				this.$pv.msg('请选择城市');
				return;
			}
			if (!this.reqData.Tag) {
				this.$pv.msg('请选择标签');
				return;
			}
			if (!this.reqData.Descript) {
				this.$pv.msg('请填写介绍');
				return;
			}
			let data = JSON.parse(JSON.stringify(this.reqData));
			data.TeamName = this.$util.utf16ToEntities(this.reqData.TeamName);
			data.Descript = this.$util.utf16ToEntities(this.reqData.Descript);
			data.Tips = this.$util.utf16ToEntities(this.reqData.Tips);
			// console.log(data,'res');
			let _this = this;
			uni.showModal({
				title: '温馨提示',
				content: '您确定要修改圈子吗？',
				confirmText: '确定',
				cancelText: '取消',
				success: async function (res) {
					if (res.confirm) {
						let res1 = await _this.$api.post('Team/EditTeam', {
							...data,
						});
						if (res1.code == 0) {
							_this.$pv.msg('修改成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 300);
						} else {
							_this.$pv.msg(res.message);
						}
					} else if (res.cancel) {
					}
				},
			});
		},
		skitype(Code, checked) {
			this.newlist = [];
			let list = this.taglist;
			let listtrue = [];
			const maxNum = 3;
			const isChooseNum = this.reqData.Tag ? this.reqData.Tag.split(',').length : 0 || 0;
			if (!checked && isChooseNum >= maxNum) {
				this.$pv.msg('最多选' + maxNum + '个类别');
				return;
			}
			for (let i = 0; i < list.length; i++) {
				list[i].checked = list[i].Code == Code ? !list[i].checked : list[i].checked;
				if (list[i].checked) {
					listtrue.push(list[i].Code);
				}
			}
			console.log(listtrue);

			this.reqData.Tag = listtrue.join(',');
		},
		changeHandler(e) {
			console.log(e);
			const {
				columnIndex,
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker,
			} = e;
			if (columnIndex === 0) {
				picker.setColumnValues(
					1,
					address[index].children.map((item) => {
						if (item.name == '市辖区' || item.name == '县') {
							return '--';
						} else {
							return item.name;
						}
					})
				);
			}
		},
		setCity(e) {
			this.reqData.Province = e.value[0];
			if (e.value[1] === '--') {
				this.reqData.City = this.reqData.Province;
				this.cityStr = e.value[0];
			} else {
				this.reqData.City = e.value[1];
				this.cityStr = e.value[0] + ' ' + e.value[1];
			}
			this.showCity = false;
		},

		async chooseavatar(e) {
			try {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async function (res) {
						let o = {
							ID: '',
							duration: 0,
							fileType: 'image',
							tempUrl: res.tempFiles[0].path,
							flieUrl: res.tempFiles[0].path,
							tempKey: uni.$u.guid(8),
							pro: 0,
							netPath: '',
						};

						let r = await _this.uploadingList(o.flieUrl, o.tempKey, new Date().getTime() - 500);
						_this.reqData.Logo = r;
						_this.isHeader = true;
					},
				});
			} catch (error) {
				this.$pv.msg('图片上传失败');
				console.log(error);
			}
		},
		async uploadingList(url, tempKey, timeStamp) {
			this.$pv.load('正在上传');
			const r = await this.$upload(url, () => {});

			this.$pv.closeLoad('');
			console.log('-----------', r);
			this.iscro = false;
			return r;
		},
	},
};
</script>
<style lang="scss">
page {
	background-color: #f6f6f6;
}
button[plain] {
	border: 0;
}
button::after {
	border: none;
}
.bgimg {
	width: 750rpx;
	height: 440rpx;
}
.page_top2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	box-sizing: border-box;
	transition: 0.3s all;
	z-index: -1;

	.tabsBack {
		height: 44px;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
		z-index: 999;

		.topTitle {
			padding-left: 20rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			width: 300rpx;
		}

		.blackbox {
			width: 52rpx;
			height: 52rpx;
			display: flex;
			align-items: center;
		}

		image {
			width: 24rpx;
			height: 36rpx;
			display: block;
		}
	}
}

.user_edit {
	width: 702rpx;
	// margin: 0 auto;
	border-radius: 16rpx;
	// padding-bottom: 220rpx;
	background: #fff;
	margin-top: 16rpx;
	position: absolute;
	top: 200rpx;
	left: 50%;
	transform: translateX(-50%);
}
.tagbox {
	margin-top: 20rpx;
	.tagtitle {
		color: #333333;
		margin-bottom: 25rpx;
	}
	.tagtextbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.tagtext {
		padding: 10rpx 22rpx;
		border: 2rpx solid #e4e4e4;
		border-radius: 8rpx;
		margin-right: 15rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	.text4 {
		color: #fff;
		background-color: #111;
		border: 2rpx solid transparent;
	}
}
.group_hd {
	height: auto;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
}
.group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;

	&::after {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 2rpx;
		content: '';
		transform: scaleY(0.6);
		background-color: #e4e4e4;
	}

	.inp_box {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: flex-end;

		input {
			width: 100%;
			text-align: right;
			padding: 32rpx 0;
			color: #333;
			font-size: 32rpx;
		}
		.inp_text {
			font-size: 32rpx;
			padding: 32rpx 0;
		}
		.radio_s {
			display: flex !important;
			height: 100rpx;
		}
		.item_check {
			padding: 10rpx;
			display: flex;
			flex-direction: row;

			.desc {
				color: #000 !important;
			}
		}
	}
	.diyPadding {
		padding: 32rpx 0;
	}
	.icon_box {
		height: 40rpx;
		width: 40rpx;
		line-height: 40rpx;
	}

	.inp_append {
		margin-left: 8rpx;
	}

	.s_btn {
		color: #fff;
		font-size: 24rpx;
		width: 170rpx !important;
		height: 60rpx !important;
		border-radius: 5rpx;
		background-color: #111;
		margin: 0 0 0 20rpx;
	}
}
.user_header_btn {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	border-radius: 0;
	.user_headerimg {
		display: flex;
		align-items: center;
	}
}

.user_header,
.cover_btn {
	border-radius: 10rpx;
	overflow: hidden;
	height: 100rpx;
	width: 100rpx;
	background: rgba(255, 255, 255, 0.1);
	margin-right: 16rpx;
	display: flex;
	// text-align: center;
	justify-content: center;
	align-items: center;

	.iamge_icon {
		height: 60rpx;
		width: 60rpx;
	}

	.image_user {
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}
}
.group_textarea {
	height: 264rpx;
	margin-top: 30rpx;
	// background-color: #fff;
	// padding-left: 32rpx;
	// text-indent: 2em;
	box-sizing: border-box;
	position: relative;
	.remtext {
		font-size: 28rpx !important;
		color: #c2c2c2 !important;
		font-weight: 400 !important;
	}
	.dectitle {
		margin-bottom: 25rpx;
	}
	.count {
		position: absolute;
		bottom: 15rpx;
		right: 15rpx;
		font-size: 24rpx;
		color: #c2c2c2;
	}
	/deep/ .u-textarea {
		background: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-bottom: none !important;
		padding: 0 !important;
		height: 100% !important;
		text-indent: 2em;
	}

	/deep/ .u-textarea__count {
		background: none !important;
		color: #0d0d0d !important;
	}

	/deep/ .u-textarea__field {
		color: #0d0d0d !important;
		font-size: 28rpx !important;
		height: 100% !important;
	}
}
.bottombtn {
	width: 100%;
	height: 196rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	z-index: 9999;

	.paybtn {
		width: 670rpx;
		height: 88rpx;
		background: #111;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		margin: 0 auto;
		margin-top: 36rpx;

		// position: fixed;
		// bottom: 88rpx;
		// left: 50%;
		// transform: translateX(-50%);
	}
}
</style>
